<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="选择预算出价模板" :visible.sync="dialogVisible" @close="resetForm()" width="400px">
        <div class="length_tips">还可以添加<el-link type="danger" :underline="false">{{length}}</el-link>个模板</div>
        <div> <el-input placeholder="请输入搜索内容"  size="mini" v-model="query"  @input="handleInput" clearable></el-input></div>
        <div class="model_list">
            <div class="model_item flexbox flexcenter flexbetween" v-for="(item,index) in budget_model" :key="index">
                <el-checkbox v-model="item.check" @change="checkModelLength">{{item.name}}</el-checkbox>
                <div class="yusuan_edit flexbox flexcenter">
                    <!-- <span class="icon_btn"><img src="../../assets/img/edit_icon.svg" alt=""></span> -->
                    <span class="icon_btn" @click="deletModel(item.id,index)"><img src="../../assets/img/ys_icon2.svg" alt=""></span>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" :loading="loading" class="el-button-width">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            length: 0,
            query:'',
            budget_model: [],
        };
    },
    created() {
        this.$bus.on("budgetModel", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.length = 10 - this.$parent.createform.budget_list.length
            this.getBudgetModel();
        });
    },
    methods: {
         // 输入事件处理函数，使用防抖
        handleInput() {
            this.model_list = []
            this.getAudienceModel();
        },
        // 关闭重置表单
        resetForm() {
            this.query = '';
            this.dialogVisible = false;
        },

        // 获取预算模板
        async getBudgetModel() {
            const { data: res } = await this.$http.post(
                "launch/Getinfo/get_model",
                {
                    type: 1,
                    qeury: this.query
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                for (let i in res.data) {
                    res.data[i].check = false;
                    res.data[i].content.model_name = res.data[i].name
                }
                this.budget_model = res.data;
            }
        },

        // 删除模板
        async deletModel(id, index) {
            const { data: res } = await this.$http.post(
                "launch/launch/dele_model",
                {
                    id: id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.budget_model.splice(index, 1);
            }
        },

        // 添加模板
        submitForm() {
            let arr = [];
            for (let i in this.budget_model) {
                if (this.budget_model[i].check == true) {
                    arr.push(this.budget_model[i].content);
                }
            }
            if (arr.length > this.length) {
                this.$message.error("已超出模板限制数量！");
            }else{
                this.$parent.createform.budget_list.push.apply(this.$parent.createform.budget_list,arr)
                this.resetForm()
            }
            this.$parent.sessionSave()
        },
    },
    components: {},
};
</script>


<style scoped>
.model_item {
    height: 48px;
    margin: 0 -20px;
    padding: 0 20px;
}
.model_item:hover {
    background-color: rgba(68, 117, 255, 0.05);
}
.length_tips {
    margin-bottom: 10px;
}
</style>
